import React, { useCallback, useEffect, useState } from "react";
import { Form, Button, Popconfirm, Switch, Space, message } from "antd";
import { SearchCheckboxTable } from "@/views/components/SearchTable/index";
import { useTableConfig } from "@/views/components/SearchTable/hooks/useTableConfig";
import { ENABLED_STATUS } from "@/views/utils/constant";
import AddSortWallModal from "./component/AddSortWallModal";
import { getSortingWallList, deleteSortingWall, sortingWallStatus, getWarehouseList } from "../service";
import WarehouseSelect from "@/views/components/WarehouseSelect";
import { Input, Select } from "@/views/components/PrefixPlaceholder";

const SortWallList = () => {
	const [visible, setVisible] = useState(0);
	const [data, setData] = useState({});
	const [selectedWarehouse, setSelectedWarehouse] = useState("");
	const [warehouseList, setWarehouseList] = useState([]);
	const [defaultValue, setDefaultValue] = useState(null);
	const [value, setValue] = useState(true);
	const tableRequest = getSortingWallList;
	const defaultColumns = [
		{
			name: "分拣墙",
			code: "name",
			search: {
				order: 2,
				content: () => <Input allowClear placeholder="分拣墙" />
			},
			width: 200
		},
		{
			name: "排",
			code: "rowQty",
			width: 200
		},
		{
			name: "列",
			code: "columnQty",
			width: 200
		},
		{
			name: "占用分拣筐数",
			code: "occupancyCount",
			width: 200
		},
		{
			name: "所属仓库",
			code: "warehouseName",
			search: {
				order: 1,
				code: "warehouseId",
				formItemProps: {
					initialValue: defaultValue
				},
				content: () => {
					return (
						<WarehouseSelect
							placeholder={"所属仓库"}
							{...WarehouseSelectProps}
							defaultValued={getDefaultValued}
							value={selectedWarehouse}
							onChange={handleWarehouseChange}
						/>
					);
				}
			},
			width: 200
		},
		{
			name: "是否启用",
			code: "isEnabled",
			render: (text, record) => (
				<span className="opera-span-common">
					<Popconfirm title="是否启禁用?" onConfirm={() => updateSwitch(record, text)} onCancel={() => cancelEnable()}>
						<Switch defaultChecked={text} checked={text == 1 ? true : false} size="default" />
					</Popconfirm>
				</span>
			),
			search: {
				order: 5,
				content: () => <Select placeholder="启用状态" allowClear options={ENABLED_STATUS} />
			},
			width: 200
		},
		{
			name: "操作",
			code: "action",
			dataIndex: "key",
			render: (t, r, i) => (
				<span className="opera-span-common">
					<a style={{ marginRight: "10px" }} onClick={() => commonHandleClick(1, r)}>
						编辑
					</a>
					<Popconfirm title="确定删除该条数据?" onConfirm={() => confirm(r)} onCancel={cancel}>
						<a href="#">删除</a>
					</Popconfirm>
				</span>
			)
		}
	];

	const [columns, setColumns] = useState(defaultColumns);
	const commonHandleClick = (status, record) => {
		setVisible(status);
		if (record) {
			setData(record);
		} else {
			setData([]);
		}
	};

	const handleWarehouseChange = async value => {
		setSelectedWarehouse(value);
		fetchList({ warehouseId: value });
	};
	const cancelEnable = () => {};
	const cancel = () => {};
	const confirm = async item => {
		const { data = [], success } = await deleteSortingWall({ id: item.id });
		if (success) {
			message.success("删除成功");
			fetchList();
		}
	};
	const getDefaultValued = val => {
		setDefaultValue(val);
		form.setFieldValue("warehouseId", val);

		fetchList({ warehouseId: val });
	};
	const updateSwitch = async (item, text) => {
		const { data = [], success } = await sortingWallStatus({ id: item.id, status: text == 1 ? 0 : 1 });
		if (success) {
			message.success("修改成功");
			fetchList();
		}
	};

	const tableKey = "SortWallList2131";
	const { fetchList, form, searchSimpleTableProps } = useTableConfig({
		tableKey,
		rowKey: "id",
		columns,
		tableRequest,
		autoFetch: false,
		hasPagination: true,
		hasQuickSearch: false,
		columnResize: true,
		beforeQuerySearch: false,
		resetSourceData: false,
		hasColsSetting: false
	});

	const CheckAddSortWallProps = {
		visible,
		data,
		fetchList,
		handleOk() {},
		handleCancel() {
			setVisible(0);
		}
	};
	const WarehouseSelectProps = {
		isDefault: true
	};
	const leftBtns = (
		<Space>
			{
				<>
					<Button style={{ marginRight: "8px" }} onClick={() => commonHandleClick(1)}>
						新建分拣墙
					</Button>
				</>
			}
		</Space>
	);
	return (
		<>
			<SearchCheckboxTable key={tableKey} leftBtns={leftBtns} mounted={false} {...searchSimpleTableProps} />
			{visible == 1 && <AddSortWallModal {...CheckAddSortWallProps} />}
		</>
	);
};

export default React.memo(SortWallList, () => {
	return true;
});
